{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KGAD</title>
    <link href="{% static 'kgad/bootstrap5/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'kgad/bootstrap5/font/bootstrap-icons.css' %}" rel="stylesheet" type="text/css">
        <link href="{% static 'kgad/css/style.css' %}" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
    <div class="myLogo">
        <span style="font-size:30px;">Multi-gene Based Risk Assessment System for Alzheimer's Disease</span><br/>
        <div class="language"><a href="/kgad/index">EN</a><span>|</span><a href="/kgad/index_cn">CN</a></div>
    </div>
    <ul class="nav nav-tabs nav-justified bg-light">
        <li class="nav-item">
            <a class="nav-link active" data-bs-toggle="tab" href="#home"><b>Home</b></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#page4"><b>AD</b></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#page2"><b>Browse</b></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#page3"><b>Predict</b></a>
        </li>
{#        <li class="nav-item">#}
{#            <a class="nav-link" data-bs-toggle="tab" href="#page4"><b>Help</b></a>#}
{#        </li>#}
{#        <li class="nav-item">#}
{#            <a class="nav-link" data-bs-toggle="tab" href="#page5"><b>帮助</b></a>#}
{#        </li>#}
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="tab" href="#page6"><b>About</b></a>
        </li>
    </ul>
    <div class="tab-content my_content">
        <div class="tab-pane fade show active" id="home">
            <div class="row" style="margin-top:15px;">
                <div class="col-5" style="margin-left:150px;">
                    <img src="{% static 'kgad/image/img_00.jpg' %}" width="460px;"/>
                    <p style="width: 460px;margin-top: 5px;text-align:justify">
                        This platform relies on PubMed to collect and collate AD-Gene association data supported by experimental evidence to establish AD-Gene association database. At the same time, the GEO database was used to obtain gene expression profile data of Alzheimer's Disease. Bioinformatics analysis method was adopted to extract new molecular biomarkers for early diagnosis of Alzheimer's Disease, and finally to construct a risk assessment system for Alzheimer's Disease based on multiple genes. The website can be used for users to browse AD associated gene related information and carry out disease risk assessment.
                    </p>
                </div>
                <div class="col-4">
                    <p style="width: 460px;margin-top: 5px;text-align:justify">
                        Alzheimer's Disease (AD) is a kind of central nervous system degeneration, mostly in the elderly population. It seriously affects the health and quality of life of the elderly, but its exact etiology and pathogenesis are still unclear. Today, faced with the problem of population aging, AD has become a major challenge to global social care and economic development. The prevention and treatment of AD is a common concern of geriatrics.
                    </p>
                    <img src="{% static 'kgad/image/img_04.jpg' %}" width="460px;"/>
                </div>
            </div>
        </div>
        <div class="container tab-pane fade" id="page2">
            <table class="table table-striped table-hover caption-top">
                <caption>List of AD-Gene Associations</caption>
                <thead class="thead">
                    <tr style="text-align: center;">
                        <th>#</th>
                        <th>Gene</th>
                        <th>PMID</th>
                        <th>Title</th>
                        <th>Journal</th>
                        <th>Evidence</th>
                    </tr>
                </thead>
                <tbody style="vertical-align: middle !important;">
                    {% for i in data %}
                        <tr>
                            <td>{{ i.id }}</td>
                            <td style="text-align: center;">{{ i.name }}</td>
                            <td><a target="_blank" href="https://pubmed.ncbi.nlm.nih.gov/{{ i.pmid }}/"> {{ i.pmid }}</a></td>
                            <td>{{ i.title }}</td>
                            <td>{{ i.journal }}</td>
                            <td>{{ i.evidence }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="tab-pane fade" id="page3">
            <fieldset>
                <legend>AD Risk Predictor</legend>
                <form id="uploadForm" enctype="multipart/form-data" method="post">
                    {% csrf_token %}
                    <div class="container">
                        <div class="row div_margin">
                            <div class="col-12 td_title">
                                Please Upload Gene Expression data and Clinical Information
                            </div>
                        </div>
                        <div class="row div_margin">
                            <div class="col-6">
                                <input type="file" name="gene_exp" id="exp" style="margin-left: 10px;width: 200px;">
                                <span id="passwordHelpInline" class="form-text">
                                    txt or xlsx
                                </span>
                            </div>
                            <div class="col-6">
                                <a href="{% static 'kgad/data/ExampleData.txt' %}" download="ExampleData.txt">Example Profile</a>
                            </div>
                        </div>
                        <div class="row div_margin" style="align-items:center;justify-content:center">
                            <button class="btn my_btn" id="file_sub" type="button" style="width: 120px;">Submit</button>
                        </div>
                    </div>
                </form>
            </fieldset>
            <fieldset id="result_field" style="display: none">
                <legend>Results</legend>
                <h6>The prediction results are as follows:</h6>
                <table class="table">
                    <thead>
                    <th>SampleName</th>
                    <th>Prediction</th>
                    <th>Probability</th>
                    </thead>
                    <tbody id="res_content">

                    </tbody>
                </table>
            </fieldset>
        </div>
        <div class="tab-pane fade" id="page4">
            <div class="row">
                <div class="col-3">
                    <ul class="list-group text-center" style="margin-top:15px;">
                        <li class="list-group-item a_focus"><a href="#">Overview of AD</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article1">What is Alzheimer's disease?</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article2">Senile dementia should be understood correctly</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article3">"Dotard" is a normal phenomenon</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article4">Alzheimer's disease is irreversible</a></li>
                        <li class="list-group-item a_focus"><a href="#">Etiology of AD</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article5">What are the causes of dementia?</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article6">Risk factors of senile dementia</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article7">How does senile dementia cause?</a></li>
                        <li class="list-group-item a_focus"><a href="#">The course of AD</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article8">The course of senile dementia</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article9">Senile dementia is mainly manifested by changes in memory and cognitive function</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article10">The change of life ability in Alzheimer's disease</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article11">Senile dementia is mainly manifested by changes in mental behavior</a></li>
                        <li class="list-group-item a_focus"><a href="#">Harms of AD</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article12">The misery of living with Alzheimer's</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article13">The harm of Alzheimer's disease</a></li>
                        <li class="list-group-item no_focus"><a href="#" id="article14">Diseases that increasingly incapacitate them</a></li>
                    </ul>
                </div>
                <div class="col-9" id="article_content">
                    <div style="text-align: center;margin-top:20px;"><h3>What is Alzheimer's disease?</h3></div>
                    <p>Are there any such people in your life? Cooking just put salt do not remember, put again; Forgetting the names of friends and family; When you say "east", you say "west"; Out the door, can't remember where home is.....</p>
                    <p>In fact, we are not unfamiliar with people with such symptoms, and sometimes even use the term "Alzheimer's" to joke about their forgetfulness. So, is Alzheimer's really as simple as forgetting things?</p>
                    <p>Commonly known as "senile dementia", the medical definition of Alzheimer's disease (AD), is a chronic progressive degenerative disease of the central nervous system, clinical manifestations of cognitive and memory function deterioration, progressive decline in daily living ability, and a variety of neuropsychiatric symptoms and behavioral disorders.</p>
                    <div style="text-align: center;margin-bottom: 10px;"><img src="{% static 'kgad/image/article_01.jpg' %}" width="500px;"/></div>
                    <p>In China, there are currently about 10 million people with Alzheimer's disease, and behind the 10 million people, there are countless families who share the pain caused by the long course of Alzheimer's disease. In the past, many film and television clips about Alzheimer's disease glamorized the disease in order to call for people to care for patients, leading many people to mistakenly believe that Alzheimer's patients will never forget their love for their families even if they forget everything, but this is not the case. Only with a clear understanding of the true condition of Alzheimer's disease, can we better care and care for patients.</p>
                    <p>Alzheimer's disease is a severe mental disability and generally has a long course, ranging from years to decades, meaning it is a "long suffering" for sufferers and their families. Patients with advanced Alzheimer's disease will completely lose the ability to take care of themselves, even bed all day and incontinence, not as beautiful and decent as some movies and TV works. In addition, the incidence of Alzheimer's disease has shown an increasing trend in recent years.</p>
                    <p>There are about 50 million people living with dementia worldwide, with 10 million new cases each year, according to the World Health Organization's website. It is predicted that the total number of dementia patients will reach 82 million by 2030 and 152 million by 2050, while the country currently has nearly 10 million Alzheimer's patients. Alzheimer's disease has become the leading cause of death, one of the fastest growing diseases!</p>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="page6">
            <div class="row">
                <div class="col-3">
                    <ul class="list-group text-center" style="margin-top:15px;">
                        <li class="list-group-item a_focus"><a href="#">Project members</a></li>
                    </ul>
                </div>
                <div class="col-9" id="right_div">
                    <div style="margin-top:20px;">
                        <p>Member 1: Liu, Weijin | Biomedical Engineering, School of Life Sciences, Tiangong University</p>
                        <p>Member 2: Tang, Jinglei | Intelligent Medical Engineering, School of Life Sciences, Tiangong University</p>
                        <p>Member 3:Peng, Wenke | Biomedical Engineering, School of Life Sciences, Tiangong University</p>
                        <p>Member 4: Ran, linYan | Biomedical Engineering, School of Life Sciences, Tiangong University</p>
                        <p>Member 5:Chen, Zizheng | Biomedical Engineering, School of Life Sciences, Tiangong University</p>
                        <p>Member 6: Yang, Yi | Biomedical Engineering, School of Life Sciences, Tiangong University</p>
                        <p>Instructor: Shi, Jiangcheng | Associate Professor  shijiangcheng@tiangong.edu.cn</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row footer">
            <p>School of Life Sciences, Tiangong University
                <br/>
                Address: No.399 Binshui West Road, Xiqing District, Tianjin, China
            </p>
        </div>
    </div>
</div>

<script src="{% static 'kgad/js/jquery-3.6.1.min.js' %}"></script>
<script src="{% static 'kgad/bootstrap5/js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'kgad/js/main.js' %}"></script>
</body>
</html>